<!DOCTYPE html>
<html>
<head>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type">
    <title>dome</title>
    <link rel="stylesheet" href="images/style.css">
    <script type="text/javascript" src="images/jquery.js"></script>
     <style type="text/css">
        .abc { position: absolute; width: 50px; height: 50px; background: #ccc; border-radius: 15px; }
    </style>
</head>
<body>

<div class="wrap">
    <div class="head">
        <h1>
            <a href="http://2kid.org" title="2Kid">2Kid </a>
        </h1>

        <h2>关注web、关注前端</h2>
    </div>
    <div class="banner">
        <h3>FileReader API</h3>
    </div>
    <div class="content dometop">
        <div class="box domepage">
            <h4><a class="reArt"  href="">返回文章</a>示例 </h4>

            <div class="cont">
                <div id='abcd'>
                    <div class="abc"></div>
                    <div class="abc"></div>
                    <div class="abc"></div>
                    <div class="abc"></div>
                    <div class="abc"></div>
                </div>

                <script type="text/javascript">
                    var abc = document.getElementById('abcd').getElementsByTagName('div');
                    function addEvent(element, type, handler) {
                        if (element.addEventListener) {
                            element.addEventListener(type, handler, false);
                        } else if (element.attachEvent) {
                            element.attachEvent("on" + type, handler);
                        } else {
                            element["on" + type] = handler;
                        }
                    }
                    addEvent(document, 'mousemove', handler);
                    function handler(e) {
                        var x = e.clientX,y = e.clientY;
                        waiteach(0, abc.length - 1, 1, 100, function(i) {
                            abc[i].style.left = x + i * 50 + 'px';
                            abc[i].style.top = y + 'px';
                        })
                    }
                    function waiteach(start, end, step, t, fn, endfn) {
                        fn(start);
                        if (start < end) {
                            setTimeout(function() {
                                start += step;
                                waiteach(start, end, step, t, fn, endfn);
                            }, t);
                        } else if (typeof endfn == 'function') {
                            endfn();
                        }
                    }

                </script>






            </div>
        </div>
        <div class="box domelist">
            <h4>dome列表</h4>

            <div class="cont">
                <ul>
                    <li><a href="CSSsprites.html.html">CSSsprites</a></li>


                </ul>
            </div>
        </div>
        <div class="box codepage">
            <h4>代码</h4>

            <pre class="cont">
&lt;style type="text/css"&gt;
    .abc { position: absolute; width: 50px; height: 50px; background: #ccc; border-radius: 15px; }
&lt;/style&gt;</pre>
<pre>&lt;div id='abcd'&gt;
    &lt;div class="abc"&gt;&lt;/div&gt;
    &lt;div class="abc"&gt;&lt;/div&gt;
    &lt;div class="abc"&gt;&lt;/div&gt;
    &lt;div class="abc"&gt;&lt;/div&gt;
    &lt;div class="abc"&gt;&lt;/div&gt;
&lt;/div&gt;

&lt;script type="text/javascript"&gt;
var abc = document.getElementById('abcd').getElementsByTagName('div');
function addEvent(element, type, handler) {
    if (element.addEventListener) {
        element.addEventListener(type, handler, false);
    } else if (element.attachEvent) {
        element.attachEvent("on" + type, handler);
    } else {
        element["on" + type] = handler;
    }
}
addEvent(document, 'mousemove', handler);
function handler(e) {
    var x = e.clientX,y = e.clientY;
    waiteach(0, abc.length - 1, 1, 100, function(i) {
        abc[i].style.left = x + i * 50 + 'px';
        abc[i].style.top = y + 'px';
    })
}
function waiteach(start, end, step, t, fn, endfn) {
    fn(start);
    if (start &lt; end) {
        setTimeout(function() {
            start += step;
            waiteach(start, end, step, t, fn, endfn);
        }, t);
    } else if (typeof endfn == 'function') {
        endfn();
    }
}

&lt;/script&gt;



            </pre>
        </div>

    </div>
    <div class="foot">
        Copyright © 2011 <strong>2Kid</strong> |
        Powered by <a target="bank" href="http://wordpress.org/">WordPress</a> |
        Theme by <a target="bank" href="http://2kid.org">2Kid</a>
    </div>
</div>
<script type="text/javascript" src="images/dome.js"></script>
</body>
</html>